iT邦幫忙

2022 iThome 鐵人賽

DAY 21
0
Modern Web

前端開發維護筆記 - 打造健康的前端專案系列 第 21

Mocking API 的神器 Mock Service Worker

  • 分享至 

  • xImage
  •  

為什麼我們會須要 Mock API 呢?

第一點是我們在做前端開發時,可以不用真的與後端進行互動, 可以在後端完成 API 前就進行相關的開發,需要進行各種情境測試時也不需要看別人臉色,更不用擔心會影響到資料庫環境。

而且在進行 Unit test 時,我們也希望把問題聚焦在真正要測試的組件,盡可能地排除外部可能的干擾。

Mock API 這個方法可以同時滿足我們在開發與測試上的需求。

為什麼選擇 MSW - Mock Service Worker

而我為什麼選擇使用 MSW 作為 Mock API 的工具呢?

最主要的好處是因為它是使用 Service Worker 攔截 http request ,所以我們使用 Mock API 也不會在 code 中留下任何的痕跡 ,只需要正常的使用 API 就行了,而只要把 MSW 的攔截關掉,請求就可以正常的發出送給 Server。

而且使用 MSW 攔截的請求,也一樣可以在瀏覽器的開發者工具中看到請求的詳情,MSW 也有很高的自由度可以讓你變更 response 的種種細節。

What is Service Worker

這張來自 https://blog.clairvoyantsoft.com/service-workers-in-javascript-simple-demo-app-81efcdf2f2c4?gi=abbe01a65fba 的圖片可以幫助我們理解 Service Worker

Untitled

Service Worker 可以攔截並暫存 http request 並直接通過 Service Worker 提供回傳,而不需要每次請求時都去要真的發給 Server。


上一篇
Google Cloud Platform 介紹
下一篇
Sentry 攔截錯誤的訊息為通靈提供線索
系列文
前端開發維護筆記 - 打造健康的前端專案27
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言